<template>
  <div class="staffList">
    <List
      :linklist="linklist"
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
    ></List>
    <Paging />
  </div>
</template>

<script>
import List from "../../components/List.vue";
import Paging from "../../components/Paging.vue";
import { staffListAxios } from "../../http/apis/staffApi";

export default {
  name: "StaffList",
  components: {
    List,
    Paging,
  },
  data() {
    return {
      limit:50,
      page:1,
      // 表格标题行
      linklist: [
        {
          id: "0",
          name: "账号",
          isRouter: true,
          url: "/information/staffinformation",
        },
        {
          id: "1",
          name: "姓名",
          isRouter: false,
        },
        {
          id: "2",
          name: "手机号码",
          isRouter: false,
        },
        {
          id: "3",
          name: "部门",
          isRouter: false,
        },
        {
          id: "4",
          name: "职位",
          isRouter: false,
        },
        {
          id: "5",
          name: "客户数量限制",
          isRouter: false,
        },
        {
          id: "6",
          name: "员工提成",
          isRouter: false,
        },
        {
          id: "7",
          name: "状态",
          isRouter: false,
        },
      ],
      // 管理 操作数据
      btnList: [
        {
          id: "1",
          name: "权限",
          type: "员工管理",
        },
        {
          id: "2",
          name: "管理范围",
          type: "员工管理",
        },
        {
          id: "3",
          name: "修改",
          type: "员工管理",
        },
        {
          id: "4",
          name: "删除",
          type: "员工管理",
        },
      ],
      // 字段名称
      titleList: [
        "employee_login",
        "employee_name",
        "employee_tel",
        "dept_name",
        "employee_role",
        "employee_clientlimit",
        "employee_sal",
        "employee_state",
      ],
      //表格数据
      tableData: [
        // {
        //   account: "admin",
        //   name: "超级管理员",
        //   phone: "666666",
        //   department: "总经办",
        //   position: "超级管理员",
        //   customerlimit: "无限制",
        //   staffup: "-",
        //   state: "正常",
        // },
        // {
        //   account: "123456",
        //   name: "陈仪",
        //   phone: "54213",
        //   department: "总经办",
        //   position: "国信安老总",
        //   customerlimit: "100W",
        //   staffup: "-100%",
        //   state: "不正常",
        // },
        // {
        //   account: "2222",
        //   name: "小杰克",
        //   phone: "101010",
        //   department: "业务一部",
        //   position: "销售员",
        //   customerlimit: "无限制",
        //   staffup: "50%",
        //   state: "正常",
        // },
        // {
        //   account: "5201314",
        //   name: "忘记密码只有炫改",
        //   phone: "123123123",
        //   department: "总经办",
        //   position: "客服人员",
        //   customerlimit: "无限制",
        //   staffup: "200%",
        //   state: "正常",
        // },
      ],
    };
  },
  created() {
    this.getStaffList();
  },
  methods: {
    getStaffList() {
      staffListAxios(this.limit,this.page)
        .then((res) => {
          console.log("员工管理请求成功：", res.data);
          // 将后端数据放入新数组
          let stafflistArr = res.data.data;
          // 将新数组 stafflistArr 赋值给 tableData
          stafflistArr.forEach(item => {
            let obj = {
              dept_id: item.dept.dept_id, // 部门id
              employee_login: item.employee_login, //账号
              employee_name: item.employee_name, // 姓名
              employee_tel: item.employee_tel, // 手机号码
              dept_name: item.dept.dept_name, //部门
              employee_role: item.employee_role, //职位
              employee_clientlimit: item.employee_clientlimit, // 客户数量限制
              employee_sal: item.employee_sal, // 员工提成
              employee_state: item.employee_state //状态
            };
            this.tableData.push(obj);
          });
        })
        .catch((err) => {
          console.log("员工管理请求错误: ", err);
        });
    },
  },
};
</script>

<style>
</style>